<template>
  <div>
    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="getVal"
    >
      <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: ["val"],
  data() {
    return {
      options4: [],
      value: this.val,
      list: [],
      loading: false,
      states: []
    };
  },
  created() {
    console.log(this.inputdata);
  },
  mounted() {
    this.$common
      .$ajax(
        "/sys/company/list",
        {
          page: 1,
          limit: 100000
        },
        "get"
      )
      .then(res => {
        this.list = res.data.body.list.map(item => {
          return { value: item.id, label: item.companyName };
        });
      })
      .catch(err => {
        alert(err);
      });
  },

  methods: {
    getVal(val) {
      var usefulData = {};

      usefulData = this.options4.filter(item => {
        return item.value === val;
      });
      this.$emit("changes", usefulData);
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options4 = this.list.filter(item => {
            return item.label.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.options4 = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
